<template lang="pug">
  Card.deploySet-con
    header.deploySet-header
      Form(:label-width="90")
        FormItem(label='名称：')
          span(style='font-size:16px') {{deploySetData.monitorName}}
          //- Input(v-model='deploySetData.monitorName',placeholder='名称')
      .btn
        Button(type='primary',v-if="btnStatus",@click='handleSave') 保存
        Button(@click='$router.push({name:"deploy_index",query: { deployIndex: $route.query.deployIndex }})') 返回
    section.deploySet-body
      Form(ref='deployForm',:model='deploySetData',:rules="ruleValidate",:label-width="100",label-position="right",style='width:600px')
        FormItem(label='监控周期：')
          Select(v-model='deploySetData.monitor_penod')
            Option(v-for="(period, index) in periods",:value='period.value',:key="index") {{period.label}}
        FormItem(label='监控指标：',prop='monitor_quota')
          Input(v-model='deploySetData.monitor_quota',placeholder='监控指标')
          span(style='margin-left:10px') [{{quotaValue}}]
        FormItem(label='短信内容：')
          Input(v-model='deploySetData.sms_content',placeholder='短信内容')
        FormItem(label='用户绑定：')
          Select(v-model='hander',multiple)
            Option(v-for="(user, index) in userData",:value='user.value',:key="index") {{user.label}}
</template>

<script>
import { asyncDeploy } from './api'
import createAPI from '@/plugins/axios'

export default {
  data() {
    return {
      periods: [
        { label: '1分钟', value: '60000' },
        { label: '3分钟', value: '180000' },
        { label: '5分钟', value: '300000' },
        { label: '10分钟', value: '600000' },
        { label: '30分钟', value: '1800000' },
        { label: '1小时', value: '3600000' },
        { label: '2小时', value: '7200000' },
        { label: '5小时', value: '18000000' },
        { label: '24小时', value: '86400000' }
      ],
      quotaData: [
        { value: '网络异常', label: '访问失败次数' },
        { value: '网站异常', label: '访问失败次数' },
        { value: '采集器异常', label: '线程死亡数量' },
        { value: '验证码服务异常', label: '调用服务次数' },
        { value: '采集服务器内存', label: '内存占用率' },
        { value: '采集任务并发量', label: '任务并发量' },
        { value: '爬取速度', label: '爬虫爬取速度' },
        { value: '错误日志', label: '错误日志数量' },
        { value: '异常数据', label: '异常数据数量' }
      ],
      userData: [],
      deploySetData: {
        ruleId: this.$route.query.ruleId,
        monitorName: '',
        monitor_penod: '1',
        monitor_quota: '',
        sms_content: '',
        hander: []
      },
      hander: [],
      btnStatus: false,
      quotaValue: '',
      ruleValidate: {
        monitor_quota: [
          { required: true, message: '监控指标不能为空', trigger: 'blur', transform: String },
          { type: 'number', message: '监控指标必须是数字', trigger: 'blur', transform: Number }
        ]
        // hander: [{ required: true, message: '监控指标不能为空', trigger: 'change' }]
      }
    }
  },
  mounted() {
    const deployPower = JSON.parse(sessionStorage.getItem('routes')).filter(item => item.name === 'deploy')[0]
    if (deployPower.children[0].meta[`${this.$route.query.deployType}规则配置`][`/config_centor/${this.$route.query.modifyUrl}`]) this.btnStatus = true
    ;(async () => {
      const [deploySetData, userData] = await Promise.all([
        createAPI(`config_centor/${this.$route.query.queryUrl}`, 'post', { data: { ruleId: this.$route.query.ruleId } }),
        asyncDeploy.getUser({ data: {} })
      ]).catch(error => {})
      ;({
        data: {
          data: {
            ruleId: this.deploySetData.ruleId,
            monitorName: this.deploySetData.monitorName,
            monitor_penod: this.deploySetData.monitor_penod,
            monitor_quota: this.deploySetData.monitor_quota,
            sms_content: this.deploySetData.sms_content
          }
        }
      } = deploySetData)
      const breadcrumbData = [{ name: '配置中心' }, { name: this.$route.query.deployType }]
      this.$store.dispatch('breadcrumb/getBreadCrumb', breadcrumbData)

      this.hander = JSON.parse(deploySetData.data.data.hander)
      this.userData = userData.data.data.result.map(item => {
        return { value: item.userId, label: item.userName }
      })
      this.quotaData.forEach(item => {
        if (item.value === this.deploySetData.monitorName) this.quotaValue = item.label
      })
    })()
  },
  methods: {
    handleSave() {
      this.$refs.deployForm.validate(async valid => {
        if (valid) {
          try {
            if (this.hander.length === 0) {
              this.$Message.warning = '绑定用户不能为空'
              return
            } else {
              const copyHander = JSON.parse(JSON.stringify(this.hander))
              this.deploySetData.hander = JSON.stringify(copyHander)
            }
            await createAPI(`config_centor/${this.$route.query.modifyUrl}`, 'post', { data: this.deploySetData })
            this.$Message.success('修改成功')
            this.$router.push({ name: 'deploy_index', query: { deployIndex: this.$route.query.deployIndex } })
          } catch (error) {}
        }
      })
    }
  }
}
</script>

<style lang="scss">
@import './index.scss';
</style>
